<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  production: {
    type: Object,
    required: true,
    default: () => ({
      total: 0,
      qualified: 0,
      defect: 0
    })
  },
  // 保持prop名称为carbonEmission以保持向后兼容
  // 现在传入的实际是气体消耗数据
  carbonEmission: {
    type: Object,
    required: true,
    default: () => ({
      year: 0,
      month: 0,
      day: 0
    })
  }
})

// 安全访问辅助函数
const safeGet = (obj, path, defaultValue = 0) => {
  if (!obj) return defaultValue
  return path.split('.').reduce((o, key) => 
    (o && o[key] !== undefined ? o[key] : defaultValue), obj)
}
</script>

<template>
  <dv-border-box-8 class="dashboard-panel">
    <div class="panel-header">生产统计</div>
    <div class="data-overview">
      <div class="overview-section">
        <div class="overview-title">生产总量</div>
        <div class="overview-items">
          <div class="overview-item">
            <div class="item-label">总量</div>
            <div class="item-value info">{{ safeGet(production, 'total') }}</div>
          </div>
          <div class="overview-item">
            <div class="item-label">合格</div>
            <div class="item-value success">{{ safeGet(production, 'qualified') }}</div>
          </div>
          <div class="overview-item">
            <div class="item-label">缺陷</div>
            <div class="item-value" style="color: #F56C6C">{{ safeGet(production, 'defect') }}</div>
          </div>
        </div>
      </div>
      
      <div class="overview-section">
        <div class="overview-title">气体消耗量</div>
        <div class="overview-items">
          <div class="overview-item">
            <div class="item-label">年度</div>
            <div class="item-value info">{{ safeGet(carbonEmission, 'year') }}</div>
          </div>
          <div class="overview-item">
            <div class="item-label">月度</div>
            <div class="item-value info">{{ safeGet(carbonEmission, 'month') }}</div>
          </div>
          <div class="overview-item">
            <div class="item-label">日度</div>
            <div class="item-value info">{{ safeGet(carbonEmission, 'day') }}</div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box-8>
</template>

<style scoped>
/* 数据总览样式 */
.data-overview {
  margin-bottom: 10px;
  height: 25%;
  padding: 0 5px;
}

.overview-section {
  margin-bottom: 10px;
}

.overview-title {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 5px;
}

.overview-items {
  display: flex;
  justify-content: space-between;
}

.overview-item {
  flex: 1;
  text-align: center;
}

.item-label {
  font-size: 11px;
  color: #ccc;
  margin-bottom: 3px;
}

.item-value {
  font-size: 16px;
  font-weight: bold;
}

.item-value.success {
  color: #67c23a;
}

.item-value.info {
  color: #00ffff;
}

.dashboard-panel {
  position: relative;
  width: 100%;
  height: 100%;
  /* 确保边框可见 */
  /* padding: 10px; */
  box-sizing: border-box;
  z-index: 1;
  background-color: rgba(0, 12, 26, 0.7); /* 半透明背景 */
}


</style> 